<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能计算 - 权益明账通</title>
    <style>
        /* 完全保持之前的样式不变 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
        }

        .main-nav {
            background-color: #1976d2;
            padding: 1rem;
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            justify-content: center;
        }

        .main-nav li {
            margin: 0 1rem;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .main-nav a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .main-nav .active a {
            background-color: rgba(255, 255, 255, 0.3);
        }

        .intro {
            text-align: center;
            padding: 4rem 1rem;
            background: linear-gradient(135deg, #1976d2, #2196f3);
            color: white;
            margin-top: 0;
        }

        .intro h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

        .intro p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .calculator-section {
            text-align: center;
            padding: 3rem 1rem;
            background-color: #f5f7fa;
            width: 100%;
        }

        .calculator-section h2 {
            font-size: 2.2rem;
            color: #1976d2;
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
        }

        .calculator-section h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #1976d2, #2196f3);
            border-radius: 2px;
        }

        .calculator-section .subtitle {
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        .calculators-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            padding: 0;
            max-width: 100%;
            margin: 0 auto;
            background-color: #f5f7fa;
        }

        /* 计算器内容样式 */
        .shopping-calculator-content {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem auto;
            max-width: 800px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .form-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 1.5rem;
            align-items: start;
        }

        .form-label {
            font-weight: 600;
            color: #333;
            padding: 0.5rem 0;
        }

        .form-input {
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            width: 100%;
            box-sizing: border-box;
        }

        .form-input:focus {
            outline: none;
            border-color: #1976d2;
        }

        .section-divider {
            grid-column: 1 / -1;
            border-top: 2px solid #e0e0e0;
            margin: 1rem 0;
            padding-top: 1rem;
        }

        .calculate-button {
            grid-column: 2;
            background: #1976d2;
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 4px;
            font-size: 1.1rem;
            cursor: pointer;
            margin-top: 1rem;
        }

        .calculate-button:hover {
            background: #1565c0;
        }

        /* 输出结果区域样式 */
        .result-section {
            grid-column: 1 / -1;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1rem;
            border-left: 4px solid #1976d2;
        }

        .result-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1976d2;
            margin-bottom: 1rem;
        }

        .amount-result {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .explanation {
            color: #666;
            line-height: 1.5;
            padding: 0.5rem 0;
        }

        .default-result {
            color: #999;
            font-style: italic;
        }

        @media (max-width: 768px) {
            .main-nav ul {
                flex-wrap: wrap;
            }
            .main-nav li {
                margin: 0.5rem;
            }
            .form-layout {
                grid-template-columns: 1fr;
            }
            .calculate-button {
                grid-column: 1;
            }
        }
    </style>
</head>
<body>
    <!-- 导航菜单 -->
    <nav class="main-nav">
        <ul>
            <li><a href="./index.html">首页</a></li>
            <li class="active"><a href="./calculator.html">智能计算</a></li>
            <li><a href="./volunteer.html">志愿者平台</a></li>
            <li><a href="./AIassistant.html">全能智慧助手</a></li>
        </ul>
    </nav>

    <!-- 介绍区域 -->
    <section class="intro">
        <h1>智能计算工具</h1>
        <p>专业维权计算器，助您精准计算各类消费维权场景中的权益和补偿</p>
        <p ><a href="https://flk.npc.gov.cn/" style="color: white">国家法律法规数据库</a></p>
    </section>

    <!-- 四个计算器子板块 -->
    <div class="calculators-container">
        <!-- 板块1：消费购物维权计算器 -->
        <div class="calculator-section">
            <h2>消费购物维权计算器</h2>
            <p class="subtitle">精准计算购物维权场景中的应退金额和赔偿金额</p>
            
            <div class="shopping-calculator-content">
                <div class="form-layout">
                    <!-- 基础信息 -->
                    <div class="form-label">基础信息</div>
                    <div></div>
                    
                    <div class="form-label">商品原价（元）</div>
                    <input type="number" class="form-input" placeholder="请输入商品原价" id="originalPrice">
                    
                    <div class="form-label">实际付款金额（元）</div>
                    <input type="number" class="form-input" placeholder="请输入实际付款金额" id="actualPayment">
                    
                    <div class="form-label">维权类型</div>
                    <select class="form-input" id="rightsType">
                        <option value="">请选择维权类型</option>
                        <option value="退款退货">退款退货</option>
                        <option value="假一赔三">假一赔三</option>
                        <option value="瑕疵赔偿">瑕疵赔偿</option>
                    </select>
                    
                    <!-- 补充项 -->
                    <div class="section-divider"></div>
                    <div class="form-label">补充项</div>
                    <div></div>
                    
                    <div class="form-label">已使用时长（天，影响折价）</div>
                    <input type="number" class="form-input" placeholder="请输入已使用天数" id="usedDays">
                    
                    <div class="form-label">预计使用天数（天）</div>
                    <input type="number" class="form-input" placeholder="请输入预计使用天数" id="expectedDays">
                    
                    <div class="form-label">商品损坏程度</div>
                    <select class="form-input" id="damageLevel">
                        <option value="">请选择损坏程度</option>
                        <option value="0%">0%</option>
                        <option value="10%">10%</option>
                        <option value="20%">20%</option>
                        <option value="30%">30%</option>
                        <option value="40%">40%</option>
                        <option value="50%">50%</option>
                    </select>
                    
                    <!-- 计算按钮 -->
                    <div></div>
                    <button class="calculate-button" onclick="calculateShopping()">开始计算</button>
                    
                    <!-- 输出结果区域 -->
                    <div class="result-section">
                        <div class="result-title">计算结果</div>
                        <div class="amount-result" id="amountResult">
                            <span class="default-result">等待计算结果...</span>
                        </div>
                        <div class="explanation" id="explanation">
                            <span class="default-result">填写信息并点击"开始计算"后显示详细说明</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 板块2：兼职劳务维权计算器 -->
        <div class="calculator-section">
            <h2>兼职劳务维权计算器</h2>
            <p class="subtitle">精准计算劳务维权场景中的应得工资和赔偿金额</p>
            
            <div class="shopping-calculator-content">
                <div class="form-layout">
                    <!-- 基础信息 -->
                    <div class="form-label">基础信息</div>
                    <div></div>
                    
                    <div class="form-label">薪资类型</div>
                    <select class="form-input" id="salaryType">
                        <option value="">请选择薪资类型</option>
                        <option value="时薪">时薪</option>
                        <option value="日薪">日薪</option>
                        <option value="月薪">月薪</option>
                    </select>
                    
                    <div class="form-label">约定薪资标准（元）</div>
                    <input type="number" class="form-input" placeholder="请输入约定薪资" id="salaryStandard" min="0" step="0.01">
                    
                    <!-- 补充项 -->
                    <div class="section-divider"></div>
                    <div class="form-label">补充项</div>
                    <div></div>
                    
                    <div class="form-label">拖欠时长（天）</div>
                    <input type="number" class="form-input" placeholder="请输入拖欠天数" id="delayDays" min="0">
                    
                    <div class="form-label">当月工作日</div>
                    <input type="number" class="form-input" placeholder="请输入当月工作日" id="workDays" min="0">
                    
                    <div class="form-label">实际工作时长</div>
                    <input type="number" class="form-input" placeholder="时薪请填写小时，其它填写天数" id="actualWorkTime" min="0">
                    
                    <!-- 计算按钮 -->
                    <div></div>
                    <button class="calculate-button" onclick="calculateLabor()">开始计算</button>
                    
                    <!-- 输出结果区域 -->
                    <div class="result-section">
                        <div class="result-title">计算结果</div>
                        <div class="amount-result" id="laborAmountResult">
                            <span class="default-result">等待计算结果...</span>
                        </div>
                        <div class="explanation" id="laborExplanation">
                            <span class="default-result">填写信息并点击"开始计算"后显示详细说明</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 板块3：租房住宿维权计算器 -->
        <!-- 租房住宿维权计算器板块 -->
        <div class="calculator-section">
            <h2>租房住宿维权计算器</h2>
            <p class="subtitle">精准计算租房维权场景中的应退押金和费用结算</p>

            <div class="shopping-calculator-content">
                <div class="form-layout">
                    <!-- 基础信息 -->
                    <div class="form-label">基础信息</div>
                    <div></div>

                    <div class="form-label">月租金（元）</div>
                    <input type="number" class="form-input" placeholder="请输入月租金" id="monthlyRent" min="0" step="0.01">

                    <div class="form-label">支付押金（元）</div>
                    <input type="number" class="form-input" placeholder="请输入支付押金" id="deposit" min="0" step="0.01">

                    <div class="form-label">租房时长（月）</div>
                    <input type="number" class="form-input" placeholder="请输入租房月数" id="rentalMonths" min="0">

                    <div class="form-label">合同违约金（元）</div>
                    <input type="number" class="form-input" placeholder="应输入月租金的倍数，默认1" id="penalty" min="0" step="0.01">

                    <div class="form-label">退房类型</div>
                    <select class="form-input" id="checkoutType">
                        <option value="">请选择退房类型</option>
                        <option value="正常退房">正常退房</option>
                        <option value="提前退租">提前退租</option>
                        <option value="房东违约">房东违约</option>
                    </select>

                    <!-- 补充项 -->
                    <div class="section-divider"></div>
                    <div class="form-label">补充项</div>
                    <div></div>

                    <div class="form-label">房屋损坏情况</div>
                    <select class="form-input" id="damageCondition">
                        <option value="无损坏">无损坏</option>
                        <option value="自然损耗">自然损耗</option>
                        <option value="人为损坏">人为损坏</option>
                    </select>

                    <div class="form-label">已缴物业水电费（元）</div>
                    <input type="number" class="form-input" placeholder="请输入已缴费用" id="paidFees" min="0" step="0.01">

                    <div class="form-label">实际产生物业水电费（元）</div>
                    <input type="number" class="form-input" placeholder="请输入实际费用" id="actualFees" min="0" step="0.01">

                    <!-- 计算按钮 -->
                    <div></div>
                    <button class="calculate-button" onclick="calculateRental()">开始计算</button>

                    <!-- 输出结果区域 -->
                    <div class="result-section">
                        <div class="result-title">计算结果</div>
                        <div class="amount-result" id="rentalAmountResult">
                            <span class="default-result">等待计算结果...</span>
                        </div>
                        <div class="explanation" id="rentalExplanation">
                            <span class="default-result">填写信息并点击"开始计算"后显示详细说明</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 板块4：出国留学维权计算器 -->
        <!-- 出国留学维权计算器板块 -->
        <div class="calculator-section">
            <h2>出国留学维权计算器</h2>
            <p class="subtitle">精准计算留学维权场景中的应退费用和实际到账金额</p>

            <div class="shopping-calculator-content">
                <div class="form-layout">
                    <!-- 基础信息 -->
                    <div class="form-label">基础信息</div>
                    <div></div>

                    <div class="form-label">已缴费用类型</div>
                    <select class="form-input" id="feeType">
                        <option value="">请选择费用类型</option>
                        <option value="学费">学费</option>
                        <option value="中介费">中介费</option>
                        <option value="语言培训费">语言培训费</option>
                    </select>

                    <div class="form-label">已缴总金额（元）</div>
                    <input type="number" class="form-input" placeholder="请输入已缴金额" id="totalFee" min="0" step="0.01">

                    <div class="form-label">退费触发原因</div>
                    <select class="form-input" id="refundReason">
                        <option value="">请选择退费原因</option>
                        <option value="未入学">未入学</option>
                        <option value="入学后退学">入学后退学</option>
                        <option value="机构违约">机构违约</option>
                    </select>

                    <!-- 补充项 -->
                    <div class="section-divider"></div>
                    <div class="form-label">补充项</div>
                    <div></div>

                    <div class="form-label">已服务进度</div>
                    <div style="position: relative;">
                        <input type="number" class="form-input" placeholder="请输入服务进度，单位是%。未入学就随便输" id="serviceProgress" min="0" max="100" step="1">
                        <span style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999;">%</span>
                    </div>

                    <!-- 计算按钮 -->
                    <div></div>
                    <button class="calculate-button" onclick="calculateStudyAbroad()">开始计算</button>

                    <!-- 输出结果区域 -->
                    <div class="result-section">
                        <div class="result-title">计算结果</div>
                        <div class="amount-result" id="studyAbroadAmountResult">
                            <span class="default-result">等待计算结果...</span>
                        </div>
                        <div class="explanation" id="studyAbroadExplanation">
                            <span class="default-result">填写信息并点击"开始计算"后显示详细说明</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 消费购物维权计算函数
        async function calculateShopping() {
            const formData = {
                originalPrice: document.getElementById('originalPrice').value,
                actualPayment: document.getElementById('actualPayment').value,
                rightsType: document.getElementById('rightsType').value,
                usedDays: parseInt(document.getElementById('usedDays').value) || 0,
                expectedDays: parseInt(document.getElementById('expectedDays').value) || 0,
                damageLevel: document.getElementById('damageLevel').value || '0%'
            };
            
            // 简单验证
            if (!formData.originalPrice || !formData.actualPayment || !formData.rightsType || !formData.usedDays || !formData.expectedDays || !formData.damageLevel) {
                alert('请填写完整的基础信息');
                return;
            }
            
            try {
                const response = await fetch('/api/calculator/shopping', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    document.getElementById('amountResult').innerHTML = 
                        `<span style="color: #1976d2;">应退金额：${result.data.amount.toFixed(2)}元</span>`;
                    document.getElementById('explanation').innerHTML = 
                        `<span style="color: #333;">${result.data.explanation}</span>`;
                } else {
                    document.getElementById('amountResult').innerHTML = 
                        `<span style="color: #dc3545;">计算失败</span>`;
                    document.getElementById('explanation').innerHTML = 
                        `<span style="color: #666;">${result.message}</span>`;
                }
            } catch (error) {
                document.getElementById('amountResult').innerHTML = 
                    `<span style="color: #dc3545;">网络错误</span>`;
                document.getElementById('explanation').innerHTML = 
                    `<span style="color: #666;">${error.message}</span>`;
            }
        }

        // 兼职劳务维权计算函数
        async function calculateLabor() {
            const formData = {
                salaryType: document.getElementById('salaryType').value,
                salaryStandard: parseFloat(document.getElementById('salaryStandard').value),
                delayDays: parseInt(document.getElementById('delayDays').value) || 0,
                workDays: parseInt(document.getElementById('workDays').value) || 0,
                actualWorkTime: parseInt(document.getElementById('actualWorkTime').value) || 0
            };
            
            // 简单验证
            if (!formData.salaryType || !formData.salaryStandard || !formData.delayDays || !formData.workDays || !formData.actualWorkTime) {
                alert('请填写完整的基础信息');
                return;
            }
            
            try {
                const response = await fetch('/api/calculator/labor', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    document.getElementById('laborAmountResult').innerHTML = `
                        <div>应付工资总额：<strong>${result.data.salary.toFixed(2)}</strong>元</div>
                        <div>拖欠赔偿金：<strong>${result.data.compensation.toFixed(2)}</strong>元</div>
                        <div>合计应得金额：<strong style="color:#1976d2">${result.data.total.toFixed(2)}</strong>元</div>
                    `;
                    document.getElementById('laborExplanation').innerHTML = 
                        `<span style="color: #333;">${result.data.explanation}</span>`;
                } else {
                    document.getElementById('laborAmountResult').innerHTML = 
                        `<span style="color: #dc3545;">计算失败</span>`;
                    document.getElementById('laborExplanation').innerHTML = 
                        `<span style="color: #666;">${result.message}</span>`;
                }
            } catch (error) {
                document.getElementById('laborAmountResult').innerHTML = 
                    `<span style="color: #dc3545;">网络错误</span>`;
                document.getElementById('laborExplanation').innerHTML = 
                    `<span style="color: #666;">${error.message}</span>`;
            }
        }

        // 租房维权计算函数
        async function calculateRental() {
            const formData = {
                monthlyRent: parseFloat(document.getElementById('monthlyRent').value),
                deposit: parseFloat(document.getElementById('deposit').value),
                rentalMonths: parseInt(document.getElementById('rentalMonths').value) || 0,
                penalty: parseFloat(document.getElementById('penalty').value) || 0,
                checkoutType: document.getElementById('checkoutType').value,
                damageCondition: document.getElementById('damageCondition').value,
                paidFees: parseFloat(document.getElementById('paidFees').value) || 0,
                actualFees: parseFloat(document.getElementById('actualFees').value) || 0
            };

            // 简单验证
            if (!formData.monthlyRent || !formData.deposit || !formData.rentalMonths || !formData.penalty || !formData.checkoutType || !formData.damageCondition || !formData.paidFees || !formData.actualFees) {
                alert('请填写完整的基础信息');
                return;
            }

            try {
                const response = await fetch('/api/calculator/rental', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });

                const result = await response.json();

                if (result.code === 200) {
                    document.getElementById('rentalAmountResult').innerHTML = `
                <div>应退押金：<strong>${result.data.refund.toFixed(2)}</strong>元</div>
                <div>费用结算：<strong>${result.data.settlement.toFixed(2)}</strong>元</div>
                <div>合计应得：<strong style="color:#1976d2">${result.data.total.toFixed(2)}</strong>元</div>
            `;
                    document.getElementById('rentalExplanation').innerHTML =
                        `<span style="color: #333;">${result.data.explanation}</span>`;
                } else {
                    document.getElementById('rentalAmountResult').innerHTML =
                        `<span style="color: #dc3545;">计算失败</span>`;
                    document.getElementById('rentalExplanation').innerHTML =
                        `<span style="color: #666;">${result.message}</span>`;
                }
            } catch (error) {
                document.getElementById('rentalAmountResult').innerHTML =
                    `<span style="color: #dc3545;">网络错误</span>`;
                document.getElementById('rentalExplanation').innerHTML =
                    `<span style="color: #666;">${error.message}</span>`;
            }
        }

        // 留学维权计算函数
        async function calculateStudyAbroad() {
            const formData = {
                feeType: document.getElementById('feeType').value,
                totalFee: parseFloat(document.getElementById('totalFee').value),
                refundReason: document.getElementById('refundReason').value,
                serviceProgress: parseInt(document.getElementById('serviceProgress').value) || 0
            };

            // 简单验证
            if (!formData.feeType || !formData.totalFee || !formData.refundReason || !formData.serviceProgress ) {
                alert('请填写完整的基础信息');
                return;
            }

            try {
                const response = await fetch('/api/calculator/studyAbroad', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });

                const result = await response.json();

                if (result.code === 200) {
                    document.getElementById('studyAbroadAmountResult').innerHTML = `
                <div>应退费用：<strong>${result.data.refund.toFixed(2)}</strong>元</div>
                <div>手续费：<strong>${result.data.serviceFee.toFixed(2)}</strong>元</div>
                <div>实际到账：<strong style="color:#1976d2">${result.data.actualAmount.toFixed(2)}</strong>元</div>
            `;
                    document.getElementById('studyAbroadExplanation').innerHTML =
                        `<span style="color: #333;">${result.data.explanation}</span>`;
                } else {
                    document.getElementById('studyAbroadAmountResult').innerHTML =
                        `<span style="color: #dc3545;">计算失败</span>`;
                    document.getElementById('studyAbroadExplanation').innerHTML =
                        `<span style="color: #666;">${result.message}</span>`;
                }
            } catch (error) {
                document.getElementById('studyAbroadAmountResult').innerHTML =
                    `<span style="color: #dc3545;">网络错误</span>`;
                document.getElementById('studyAbroadExplanation').innerHTML =
                    `<span style="color: #666;">${error.message}</span>`;
            }
        }
    </script>
    <!-- 页脚版权信息 -->
    <footer style="text-align: center; padding: 2rem; background-color: #f0f0f0; color: #666; font-size: 0.9rem;">
        <p>曹惠宁 杜梓沫 杨雨昔 刘晓雨 宋金乔 张墨涵 李雨桐 作品 © 2025</p>
        <p>黑河学院经济管理学院、文化旅游学院、计算机与信息工程学院 软件项目开发社团 版权所有</p>
    </footer>
</body>
</html>